<template>
  <div class="out">
    <div class="container">
      <div class="space-left">
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>📜 我的信息</span>
          </div>
          <div class="panel-body margint">
            <el-tooltip content="修改头像" placement="top">
              <img
                  :src="userInfo.favicon ?? 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"
                  alt=""
                  @click="()=>faviconModalVisable = true"
                  style="cursor: pointer"
              >
            </el-tooltip>
            <div class="user">
              <span class="nickname">{{ userInfo.nickname }}</span>
              <span class="rank">🌟全站排名🌟：{{ rank }}</span>
            </div>
          </div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>🏷️ 个人资料</span>
            <span style="color: #3689FF;cursor: pointer;font-size: 13px" @click="showModal">✏️修改资料</span>
          </div>
          <div class="profile-body">
            <div class="profile-title">电话号码</div>
            <div class="profile-content">
              <el-icon>
                <iphone style="font-size: 20px;color: #67C23A"/>
              </el-icon>
              {{ userInfo.phone ?? '暂无' }}
            </div>
            <div class="profile-title">微信</div>
            <div class="profile-content">
              <el-icon>
                <chat-dot-round style="font-size: 20px;color: #E6A23C"/>
              </el-icon>
              {{ userInfo.wechat ?? '暂无' }}
            </div>
            <div class="profile-title">github</div>
            <div class="profile-content">
              <el-icon>
                <monitor style="font-size: 20px;color: #409EFF"/>
              </el-icon>
              {{ userInfo.github ?? '暂无' }}
            </div>
            <div class="profile-title">个人网站</div>
            <div class="profile-content">
              <el-icon>
                <aim style="font-size: 20px;color: #67C23A"/>
              </el-icon>
              {{ userInfo.website ?? '暂无' }}
            </div>
          </div>
        </div>
      </div>
      <div class="space-right">
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span><el-icon><user style="font-size: 20px;color: #409EFF"/></el-icon>
              &nbsp;&nbsp;个人简介
            </span>
          </div>
          <div v-html="userInfo.introduction?.replaceAll('\n','<br/>') ?? '暂无'"
               class="introduction"
          ></div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>
              📚&nbsp;&nbsp;最近答题记录
            </span>
          </div>
          <div class="introduction"
          >
            <div class="space-record-container">
              <el-row class="space-ques-head">
                <el-col :span="5">提交结果</el-col>
                <el-col :span="4">执行用时</el-col>
                <el-col :span="4">内存消耗</el-col>
                <el-col :span="4">语言</el-col>
                <el-col :span="7">提交时间</el-col>
              </el-row>
              <div v-if="records.length === 0">
                <el-empty description="暂无提交记录 "></el-empty>
              </div>
              <div v-else v-for="r in records" :key="r.id">
                <div class="space-ques-row">
                  <el-row style="display: flex;align-items: center">
                    <el-col :span="5">
                      <el-tag :type="getStatusTagType(r.status)">
                        {{getStatusName(r.status)}}
                      </el-tag>

                    </el-col>
                    <el-col :span="4">{{ (r.timeUsed / 1000000).toFixed(2)}}ms</el-col>
                    <el-col :span="4">{{ (r.spaceUsed / 1000000).toFixed(2)}}MB</el-col>
                    <el-col :span="4">
                      {{getLanguageName(r.language)}}
                    </el-col>
                    <el-col :span="7" >
                      {{ new Date(r.time * 1000).toLocaleString() }}
                    </el-col>
                  </el-row>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="修改个人信息">
    <InfoForm @closeModal="dialogTableVisible = false"/>
  </el-dialog>
  <el-dialog v-model="faviconModalVisable" title="修改头像" width="400px">
    <FaviconUpload @closeModal="faviconModalVisable = false"/>
  </el-dialog>

</template>

<script>
import {User, Iphone, Message, Aim, Monitor, ChatDotRound} from '@element-plus/icons'
import {Record} from "../utils/http/record";
import {User as UserUtils} from "../utils/http/user"
export default {
  name: "Space",
  components: {User, Iphone, Message, Aim, Monitor, ChatDotRound},
  data: function () {
    return {
      dialogTableVisible: false,
      faviconModalVisable: false,
      records:[],
      rank : -1
    }
  },
  methods: {
    showModal() {
      this.dialogTableVisible = true
    },
    async refreshRecord(){
      let resp = await Record.getAll()
      if (resp.success){
        this.records = resp.data.records.reverse().slice(0,Math.min(8,resp.data.records.length))
      }else {
        this.$error("获取提交记录出错："+resp.message)
      }
    },
    getLanguageName(id){
      return Record.getLanguageName(id)
    },
    getStatusName(id){
      return Record.getStatusDetail(id)
    },
    getStatusTagType(id){
      return Record.getStatusTag(id);
    },
    async getRank(){
      let resp = await UserUtils.getRank()
      if (resp.success){
        this.rank = resp.data.rank
      }
    }
  },
  created() {
    if (!this.$store.state.isLogin) {
      this.$goRoute('/login')
    }
  },

  computed: {
    isLoggedIn() {
      return this.$store.state.isLogin;　　//需要监听的数据
    },
    userInfo() {
      return this.$store.state.userInfo??{};
    }
  },
  watch: {
    isLoggedIn(newVal, oldVal) {
      if (!newVal) {
        this.$goRoute('/login')
      }
    }
  },
  mounted() {
    this.refreshRecord()
    this.getRank()
  }
}
</script>

<style scoped>

.out {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f8fa;
}

.introduction {
  text-align: left;
  margin: 30px;
}

.container {
  margin: 30px auto;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.space-left {
  width: 355px;
}

.space-right {
  width: 805px;
}

.profile-body {
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  padding-bottom: 20px;
  align-items: flex-start;
}

.profile-content {
  font-size: 16px;
  display: flex;
  align-items: center;
  max-width: 90%;
}

.profile-content > i {
  font-size: 16px;
  margin-right: 10px;
  color: #1890ff;
}

.profile-title {
  font-size: 19px;
  font-weight: bold;
  margin: 15px 0;
}

.summitions {
  display: flex;
  flex-direction: column;
}

.submit-title {
  text-align: center;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
}

.submit-line {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-bottom: 1px;
  width: 100%;
  padding: 13px 16px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
}

.submit-content {
  text-align: center;
  width: 100%;
  height: 25px;
}

.nickname {
  font-size: 20px;
}

.username {
  font-size: 12px;
  font-weight: lighter;
}

.m-profile-panel {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 2.0rem;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  background: white;
}

.m-profile-panel > .panel-heading {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  background-color: #F5F5F5;
}

.m-profile-panel > .panel-heading > span {
  font-size: 1.0rem;
}

.m-profile-panel > .panel-heading > a {
  text-decoration: none;
}

.m-profile-panel > .panel-heading > a:hover {
  background-color: #DDD;
  color: #000;
}

.m-profile-panel > .panel-body {
  display: flex;
  padding-bottom: 20px;
}

.m-profile-panel > .panel-body > .user {
  display: flex;
  flex-direction: column;
}

.m-profile-panel > .panel-body > .user > .ranking > img {
  margin-right: 0.3rem;
  width: 18px;
  height: 18px;
}

.m-profile-panel > .panel-body > .user > .social > img {
  width: 32px;
  height: 32px;
}

.m-profile-panel > .panel-body > img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin: 0 1.2rem;
}

.m-profile-panel > .panel-body > ul {
  width: 100%;
  padding-inline-start: 0px;
  margin-block-end: 0px;
}

.m-profile-panel > .panel-body > ul > svg {
  margin-top: 2.0rem;
}

.m-profile-panel > .panel-body > ul > li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

.m-profile-panel > .panel-body > ul > li > span:last-child {
  background-color: #5cb85c;
  color: #FFF;
  font-size: 0.8rem;
  font-weight: bold;
  min-width: 10px;
  padding: 0px 5px;
  border-radius: 10px;
}

.m-profile-panel > .panel-body > ul > li > span > img {
  width: 18px;
  height: 18px;
  margin-top: -0.2rem;
  margin-right: 0.3rem;
}

.margint {
  margin-top: 1.0rem;
}

.rank {
  margin-top: 20px;
  color: #777;
}

.space-record-container{
  box-sizing: border-box;
  overflow-y: auto;
  font-size: 16px ;
  font-weight: normal;
}
.space-ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}
.space-ques-row{
  padding: 10px 0;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}
</style>
